<template>
  <div class="page-content">
    <div class="title">素材中心</div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
      <el-tab-pane label="图片" name="image">
        <image-table-data v-if="activeName === 'image'"></image-table-data>
      </el-tab-pane>
      <el-tab-pane label="视频" name="video">
        <video-table-data v-if="activeName === 'video'"></video-table-data>
      </el-tab-pane>
      <el-tab-pane label="文档" name="word">
        <word-table-data v-if="activeName === 'word'"></word-table-data>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ImageTableData from '@/views/decoration/components/ImageTableData.vue'
import VideoTableData from '@/views/decoration/components/VideoTableData.vue'
import WordTableData from '@/views/decoration/components/WordTableData.vue'

const activeName = ref('image')

const handleClick = () => { }
</script>

<style scoped lang="scss">
.page-content {
  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
  }
}
</style>
